<template>
     <div class="container">
    <v-toolBar
      :fullPath="postData.opera"
      :tableColumns="tableColumns"
      @changeLie="getChangeLie"
      @getSearchIPArr="getToolBarSearchIPArr"
      @getSearchIP="getToolBarSearchIP"
    >
    </v-toolBar>
    <el-table
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      :data="tableDataFn"
      border
      stripe
      style="width: 100%"
    >
     <el-table-column
      type="index" width="50" label="序号">
    </el-table-column>
      <template v-for="item in tableColumns">
        <el-table-column
          :prop="item.prop"
          :label="item.label"
           :sortable="item.sortable"
          :width="item.width"
          align="center"
          v-if="item.isShow"
          :key="item.prop"
        >
        </el-table-column>
      </template>
    </el-table>
    <v-pagination
      :dataTotal="postData.dataTotal"
      :curPage="postData.curPage"
      :pageSize="postData.pageSize"
      @getCurPage="getPaginationCurPage"
      @getPageSize="getPaginationPageSize"
    >
    </v-pagination>
  </div>
</template>

<script>
import { getSqlserverLogSize } from '@/api/index.js'
import vPagination from '../../../../common/Pagination.vue';
import vToolBar from '../../toolbar/Toolbar.vue';
import tableColumns from './DbLogSpaceColumns.js';
import bus from 'common/bus.js';
import { mapMutations } from 'vuex'
export default {
    name: 'dblog',
    components: {
        vPagination, vToolBar
    },
    data() {
        return {
            postData: {
              
                curPage: 1,
                pageSize: 20,
               dataTotal:0
            },
            tableData: [],
            
            tableColumns: tableColumns,
            SearchIPArr: [],
            searchJson: {},
            SearchIP: '',
            timerName: 'itemMonitorDataBaseSQLServerLogSpace',
            timerEventName: 'timeritemMonitorDataBaseSQLServerLogSpace',
            timerInterval: 1000 * 60,
            loading: true,
            Ioitem: {
       
        instance:'',
        ip:''
      },
            selectedMonID: "",
    };
  },
  created() {
    this.selectedMonID = this.$store.getters["ItemMonitorSqlServer/getItem"];

    
    this.getTableData();
    this.getToolBarSearchIP(this.selectedMonID.IP);

    bus.$emit("timerNewTodo", {
      name: this.timerName,
      eventName: this.timerEventName,
      interval: this.timerInterval,
      intervalNow: 0,
    });

    bus.$on(this.timerEventName, (msg) => {
      if (msg.isGetData) {
        this.getTableData();
      this.getToolBarSearchIP(this.selectedMonID.IP);
      }
    });
  },
  mounted() {
    bus.$on("ItemMonitorSqlServer", (msg) => {
      this.resetData();
      this.selectedMonID = msg;
      
      this.getTableData();
      this.getToolBarSearchIP(this.selectedMonID.IP);
    });
  },
    computed: {
        postDataFn() {
            return {
                postData: JSON.stringify(this.postData)
            }
        },
        tableDataFn() {
      return this.tableData.filter((item) => {
        // console.log(item)
          item.dbname=item.instance
          
        
        
          return item.ip==this.selectedMonID.IP;
        
      });
    },
    },
    methods: {
          ...mapMutations({
      getPagination:'SqlServerLogInfo/pagination' 
    }),
         getTableData() {
      this.loading = true;
      this.tableData=[]
      

      getSqlserverLogSize().then((res) => {
        // 处理后台返回的数据  无奈
        let itemKey=Object.keys(res)
        let itemValue=Object.values(res)
        let itemBox=[]
        // console.log(itemKey,itemValue)

        itemKey.forEach((item,index)=>{
            let itemIp=item.split(',')[0].split('[')[1]
            let iteminstance=item.split(',')[1].split(']')[0];
            
            if(itemValue[index].length>0){
                itemValue[index].forEach((valueItem,valueIndex)=>{
                
                valueItem['ip']=itemIp
                valueItem['instance']=iteminstance
                itemBox.push(valueItem)

                })
               

            }else{
               
                this.Ioitem.ip=itemIp
                this.Ioitem.instance=iteminstance
                itemBox.push(this.Ioitem)
                
               

            }

            
        })
       
        this.postData.dataTotal=itemBox.length
        this.$store.commit('SqlServerLogInfo/setItem',itemBox)
        // this.$store.commit("SqlServerLogInfo/pagination",this.postData );
        this.getPagination(this.postData)
        this.tableData= this.$store.getters["SqlServerLogInfo/getItem"]

        
        // this.dataTotal = this.tableData.length;
        // this.tableData = res.data;

        this.loading = false;
      });
    },
        getPaginationCurPage(val) {
            this.postData.curPage = val;
            this.getTableData();
        },
        getPaginationPageSize(val) {
            // 分页大小改变之后，重置当前页码为 1
            this.postData.curPage = 1;
            this.postData.pageSize = val;

            this.getTableData();
        },
        getToolBarSearchIPArr(arr) {
            // 获取搜索IP关键字
            this.SearchIPArr = arr;

            this.postData.curPage = 1;
            if (this.SearchIPArr.length > 0) {
                this.postData.filters = {
                    ip: this.SearchIPArr
                };
            } else {
                this.postData.filters = {};
            }

            this.getTableData();
        },
        async getToolBarSearchIP(str){
            // 获取搜索IP关键字
            this.SearchIP = str;
            this.postData.curPage = 1;
            // this.postData.filters = {
            //     ip: this.SearchIP
            // };
            // this.getTableData();
            await this.$store.commit("SqlServerLogInfo/SearchItem",this.SearchIP );
            // await this.$store.commit("SqlServerLogInfo/pagination",this.postData );
            this.getPagination(this.postData)
           this.tableData=await this.$store.getters["SqlServerLogInfo/getSearchItem"]
           this.postData.dataTotal=this.tableData.length
        },
        getChangeLie(val) {
            // 遍历表格列
            this.tableColumns.map((item, index) => {
                // 列的显示隐藏状态改变
                item.isShow = val.includes(item.label);
            });
        },
        resetData(){
            this.dataTotal = 0;
                this.tableData = [];

        }
    },
    watch: {

    },
    beforeDestroy() {
        // 页面关闭前，移除定时器任务
        bus.$emit('timerNewTodo', {
            name: this.timerName
        });
    },
}
</script>

<style scoped>
    .el-table .warning-row {
        background: oldlace;
    }
    .el-table .success-row {
        background: #f0f9eb;
    }
</style>